import React, { Component } from 'react'
import './Header.css'
export default class Header extends Component {
  handle = (e)=>{
    // 获取输入框的值，并且去掉空格
    const value = e.target.value.trim()
    // 如果用户 不输入值 或者 不按enter键 则直接return
    if(!value || e.keyCode !== 13) return
    // 如果上述条件满足了，则调用addTodo函数，并将输入的值以实参的形式传递回去
    // value以参数形式从header.js传递出去，在app.js接收
    this.props.addTodo(value)
    // 按下enter键后清空输入框的值
    e.target.value = ''
  }
  render() {
    return (
      <div className="todo-header">
        <input type="text"  onKeyUp={this.handle}/>
      </div>
    )
  }
}
